<!DOCTYPE html>
<html>
    <head>

        <link rel="canonical" href="http://www.jointjs.com/" />
        <meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
        <meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />

        <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

        <link rel="stylesheet" href="css/tutorial.css" />
        <link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">

        <!-- Dependencies: -->
        <script src="../node_modules/jquery/dist/jquery.js"></script>
        <script src="../node_modules/lodash/lodash.js"></script>
        <script src="../node_modules/backbone/backbone.js"></script>

        <link rel="stylesheet" type="text/css" href="../build/joint.min.css" />
        <script type="text/javascript" src="../build/joint.min.js"></script>

        <title>JointJS - JavaScript diagramming library - Getting started.</title>

    </head>
    <body class="language-javascript tutorial-page">

        <script>
            SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) {
                return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
            };
        </script>
        <div class="tutorial">

            <h2>Advanced Tutorial</h2>

            <p>By now, you should be familiar with the <a href="hello-world.html">basics of JointJS</a>, as well as with
                some <a href="intermediate.html">intermediate-difficulty topics</a>.</p>

            <p>The advanced section of the tutorial delves into much more detail about the topics mentioned in the
                basic and intermediate sections of the tutorial.
                Expect this section to grow in the future; we add advanced new features to JointJS regularly, and most
                of them will be introduced in this section.
                The current list of advanced topics can be found in the sidebar of this page.</p>

            <p>We also provide an <a href="archive.html">archive</a> of additional advanced tutorials created for past
                versions of JointJS.
                They provide a wealth of information as well - with the disclaimer that they may no longer
                showcase the best/most&nbsp;optimized/easiest/cleanest way of doing things in the current version of
                JointJS.
                For guidance on current best practices, refer to the appropriate sections of the
                <a href="hello-world.html">basic</a> and <a href="intermediate.html">intermediate</a> tutorial.</p>

        </div><!--end tutorial-->

        <script src="../node_modules/prismjs/prism.js"></script>
    </body>
</html>
